<template>
	<m-layout2 class="withdraw_box" title="兌換" :isBgUnset="false" barBg="rgba(255, 255, 255, 0)" color="#fff" gap="100 24 24">
		<view slot="right">
			<text @click="Jump(`/pages/wallet/swap/record/record?coinidFrom=${fromCoinid}&coinidTo=${toCoinid}`)">兌換記錄</text>
		</view>
		<m-block gap="30">
			<view class="fromBox">
				<view class="flex-between">
					<text>From</text>
					<view class="coinBlock flex jc-center">
						<text>{{ fromCoin['coinname'] }}</text>
					</view>
				</view>
				<view class="mtb-24">
					<input type="number" v-model="amount" placeholder="请输入数量" placeholder-class="cell-input" />
				</view>
				<view class="flex-between">
					<text class="text-primary fs26">余额：{{ myBalance }}</text>
				</view>
				<view class="percentBox flex mt-20">
					<view class="" v-for="item in percent" @click="showHand(item)" :class="{ active: Number(item) == Number(selectPercent) }">
						<text v-if="item != 1">{{ item * 100 }}%</text>
						<text v-else>MAX</text>
					</view>
				</view>
			</view>
			<view class="flex jc-center mtb-24">
				<view class="arrowBox flex jc-center">
					<m-icon type="icon-xiangxia1" color="var(--theme)" />
				</view>
			</view>
			<view class="fromBox">
				<view class="flex-between">
					<text>To</text>
					<view class="coinBlock flex jc-center">
						<text>{{ toCoin['coinname'] }}</text>
					</view>
				</view>
				<view class="mtb-24">
					<input type="number" disabled="true" v-model="toAmount" placeholder="0.0" placeholder-class="cell-input" style="background: #e7efff" />
				</view>
				<view class="flex-between">
					<text class="text-primary fs26">余额：{{ myBalance2 }}</text>
				</view>
			</view>
			<view class="flex-column mtb-20">
				<!-- <view class=" fs24 text-grey">
					说明：70%到个人账户，20%兑换成购物券，10%手续费
				</view> -->
			</view>
			<view class="btn-box">
				<m-button @click="verify">{{ btnText }}</m-button>
			</view>
		</m-block>
		<m-pay title="确认兑换" :isPay="true" :isShow="show" :showCancel="true" @handleConfirm="withdrawalApp" @handleCancel="show = false">
			<view class="pay-Box">
				<view class="hint flex-between">
					<text>兑换数量</text>
					<view class="flex">
						<text>{{ amount }}</text>
						<text class="ml-4">{{ fromCoin['coinname'] }}</text>
					</view>
				</view>
				<view class="hint flex-between">
					<text class="fw-600">获得数量</text>
					<view class="flex">
						<text>{{ toAmount }}</text>
						<text class="ml-4">{{ toCoin['coinname'] }}</text>
					</view>
				</view>
			</view>
		</m-pay>
	</m-layout2>
</template>

<script>
import { Exchange } from '@/api/Activetion.js';
import { mapState } from 'vuex';
export default {
	data() {
		return {
			isShow: false,
			amount: '',
			paypassword: '',
			fromCoinid: 4, // 果实
			toCoinid: 3, // USDT
			percent: [0.25, 0.5, 1],
			selectPercent: 0,
			show: false
		};
	},
	watch: {},
	computed: {
		...mapState({
			coinConfig: (state) => state.general.coinConfig,
			userinfo: (state) => state.user.userinfo,
			address: (state) => state.address.newaddress,
			userbalance: (state) => state.user.userbalance,
			config: (state) => state.general.config
		}),
		fromCoin() {
			return this.coinConfig[this.fromCoinid];
		},
		toCoin() {
			return this.coinConfig[this.toCoinid];
		},
		rate() {
			// return this.config[666];
			const a = BigInt(this.toWei(this.coinConfig[3]['price'], 4)); // USDT
			const b = BigInt(this.toWei(this.coinConfig[this.fromCoinid]['price'], 8));
			const c = b / a;
			return this.fromWei(c, 4);
		},
		myBalance() {
			return this.userbalance[this.fromCoinid]['balance'];
		},
		myBalance2() {
			return this.userbalance[this.toCoinid]['balance'];
		},
		btnDisabled() {
			if (!Number(this.amount)) return true;
			if (Number(this.amount) > Number(this.myBalance)) return true;
			return false;
		},
		toAmount() {
			let a = BigInt(this.toWei(this.rate, 8));
			let b = BigInt(this.toWei(this.amount, 10));
			let c = this.fromWei(b * a, 18);
			return c;
		},
		btnText() {
			if (!Number(this.amount)) return '请输入数量';
			if (Number(this.amount) > Number(this.myBalance)) return '余额不足';
			return '确定';
		}
	},
	onLoad({ coinid }) {
		this.fromCoinid = coinid;
	},
	methods: {
		verify() {
			if (!Number(this.amount)) return this.Toast('请输入数量');
			if (BigInt(this.toWei(this.amount, 18)) > BigInt(this.toWei(this.myBalance, 18))) return this.Toast('余额不足');
			this.show = true;
		},
		//梭哈
		showHand(val) {
			this.selectPercent = val;
			this.amount = this.myBalance * val;
		},
		// 提交用户转让
		async withdrawalApp(pwd) {
			const { success, msg, data, code } = await Exchange({
				coinid_from: Number(this.fromCoinid),
				coinid_to: Number(this.toCoinid),
				paytype: 1,
				paypassword: pwd,
				amt_from: this.amount
			});
			this.Toast(msg);
			if (success) {
				this.amount = '';
				this.show = false;
				setTimeout(() => {
					this.Jump(`/pages/wallet/swap/record/record?coinidFrom=${this.fromCoinid}&coinidTo=${this.toCoinid}`);
				}, 500);
			}
		}
	}
};
</script>

<style lang="scss">
.withdraw_box {
	background: url('@/static/images/pages/wallet/withdrawBg.png') no-repeat;
	background-size: 100% 500rpx;

	::v-deep .topbar {
		color: #fff;
	}
}
.fromBox {
	background: #ffffff;
	border-radius: 20px;
	border: 2rpx solid #225cf3;
	padding: 20px 24rpx;
	.coinBlock {
		width: 150rpx;
		height: 60rpx;
		background: #f8f8fa;
		border-radius: 26rpx;
	}
	input {
		padding: 24rpx;
		flex: 1;
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: 600;
		border-radius: 16rpx;
		background-color: #f8f8fa;
	}

	.cell-input {
		font-size: 30rpx;
		color: #999;
		font-weight: 400;
	}
}
.percentBox {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 20rpx;
	& > view {
		height: 66rpx;
		background: #f8f8fa;
		border-radius: 10rpx;
		text-align: center;
		line-height: 66rpx;
		font-size: 26rpx;
	}
	.active {
		background: #225cf3 !important;
		color: #fff;
	}
}
.arrowBox {
	width: 60rpx;
	height: 60rpx;
	background: #ffffff;
	box-shadow: 0px 4rpx 29rpx 0px rgba(0, 0, 0, 0.1);
	border-radius: 40%;
}
.btn-box {
	padding: 30rpx 0 20rpx;
}
.pay-Box {
	padding: 0 36rpx;
	font-size: 28rpx;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 600;

	text:nth-of-type(1) {
		color: #333333;
	}

	text:nth-of-type(2) {
		color: #333333;
	}

	view + view {
		padding-top: 20rpx;
	}
}
</style>
